<template>
  <div class="box">
    <div class="menu">
      <div class="title">遥控器</div>
      <div class="list">
        <button
          class="item"
          v-for="item of listName"
          v-bind:key="item.index"
          @click="cutover(item)"
        >CCTV{{item}}</button>
      </div>
    </div>

    <div class="video">
      <video id="example" class="video-js vjs-default-skin" controls>
        <source :src="current" type="application/x-mpegURL " />
      </video>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      listName: [1, 2, 3, 4, 5],
      pathList: [
        'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
        'http://ivi.bupt.edu.cn/hls/cctv2.m3u8',
        'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8',
        'http://ivi.bupt.edu.cn/hls/cctv4.m3u8',
        'http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8'
      ],
      current: 'http://hls01open.ys7.com/openlive/c7f89f62fb9b4f1aaea5a615c54dd7eb.hd.m3u8'
    }
  },
  methods: {
    // video初始化
    async video () {
      var player = videojs('example', {
        autoplay: true, // 自动播放，默认false
        muted: true, // 静音
        controls: true, // 是否拥有控制条，默认true
        height: 400, // 视频容器的高度，字符串或数字 单位像素 比如： height:300 or height:'300px'
        width: 700, // 视频容器的宽度
        loop: true, // 视频播放结束后，是否循环播放
        poster: 'http://vjs.zencdn.net/v/oceans.png', // 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL(可以写在行内作为属性)
        preload: 'auto' // 预加载
      })
      var options = {}

      var player = videojs(
        'example_video_1',
        options,
        function onPlayerReady () {
          videojs.log('播放器已经准备好了!')
          console.log('why', this)

          // In this context, `this` is the player that was created by Video.js.<br>  // 注意，这个地方的上下文， `this` 指向的是Video.js的实例对像player
          this.play()

          // How about an event listener?<br>  // 如何使用事件监听？
          this.on('ended', function () {
            videojs.log('播放结束了!')
          })
        }
      )
    },

    // 切换路径
    cutover (path) {
      this.current = this.pathList[path - 1]
      this.video()
      alert('加载中请稍后')
    }
  },
  async mounted () {
    await this.video()
    console.log('实例化完成')
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 717px;

  .title {
    font-weight: 800;
    text-align: center;
    font-size: 2em;
    margin-bottom: 20px;
  }
  .menu {
    background: #ddd;
    padding: 20px 0;
    border-radius: 10px;
    border: 2px solid #eee;

    .list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .item {
        border: 0;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 5px;
      }
      .item:hover {
        color: aliceblue;
        background: #001529;
      }
    }
  }

  .video {
    width: 717px;
    height: 410px;
    background: #000;
    border-radius: 20px;
    box-shadow: 0 0 2rem #555;
    overflow: hidden;
    display: flex;
    justify-content: center;
    border: 0.5rem solid #eee;
    video {
      position: relative;
      top: -3px;
    }
  }
}
</style>
